<template>
	<div class="home_h">
		<header class="m_header">
			<div class="m_header_box" id="my_search">
				<form action="javascript:void(0)">
					<span @click="goSearch()" class="icon_search"></span>
					<input @keyup.enter="goSearch()" v-model="searchVal" type="search" class="search" placeholder="点击搜索">
				</form>
			</div>
		</header>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				searchVal: ''
			}
		},
		methods: {
			goSearch() {
				let _this = this
				this.$router.push({
					path: '/searchPage',
					query: {
						searchVal: _this.searchVal
					}
				});
			}
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.m_header_box {
		form {
			width: 86%;
			padding: 0;
			margin: 0 auto;
			position: static;
		}
	}
	.m_header_box form .icon_search {
		left: 37px;
		top: 18px;
		background: url(../assets/images/search_icon2.png) no-repeat center center;
		background-size: 100% 100%;
	}
	.m_header_box form .search {
		height: 38px;
		border-radius: 10px;
		margin-top: 8px;
		opacity: .6;
	}
</style>